import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.15

Item {
    id:root
    implicitHeight: 540
    implicitWidth: 340
    property alias titleText : title.text
    property alias itemIcon : icon.source
    property alias input_num: valueText.text
    signal acceptClicked(var numberText)

    function testReg(str){
        if( 1 >= str.length && '-' === str.charAt(0)){
            return true
        }

        var regExp =  /^-?(0|[1-9]\d*)\.{0,1}\d*$/
        var isMatch = regExp.test(str);
        return isMatch;
    }

    function toUp(){
        animateUp.start();
    }

    function toDown(){
        animateDown.start();
    }

    function clear(){
        valueText.text = "";
    }

    function styleColumn(index){
        if(11 === index){
            return 2
        }else{
            return 1
        }
    }

    function styleRow(index){
        if(7 === index){
            return 3
        }else{
            return 1
        }
    }
    Rectangle{
        width: 340
        height: 540
        Label{
            id:title
            anchors.left:  parent.left
            anchors.leftMargin: 17
            anchors.top: parent.top
            anchors.topMargin: 26
            // anchors.bottomMargin: 50
            text: 'Nesting'
            font{
                family: "Microsoft YaHei"
                pixelSize: 20
                bold: true
            }
            color: "#333333"
        }
        /********************************/
        Rectangle{

            width:307
            height: 83
            color: "#EAEAEA"
            radius: 5
            anchors.top: title.bottom
            anchors.topMargin: 13
            anchors.left:  parent.left
            anchors.leftMargin: 17
            Rectangle{
                id:rect_itemicon
                width:56
                height: 56
                anchors.verticalCenter: parent.verticalCenter
                anchors.left: parent.left
                anchors.leftMargin: 8
                // color: 'transparent'
                radius: 5
                Image {
                    id: icon
                    source: 'qrc:/img/stretch.png'
                    width:30
                    height: 30
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.verticalCenter: parent.verticalCenter
                }
                MouseArea{
                    anchors.fill: parent
                    onPressed: mouse.accepted = true;
                    onReleased: mouse.accepted = true;
                    onClicked: mouse.accepted = true;
                }
            }

            Rectangle{
                // -
                width:56
                height: 56
                anchors.verticalCenter: parent.verticalCenter
                anchors.left: rect_itemicon.right
                anchors.leftMargin: 8
                radius: 5
                Image {
                    id: img_keyboard_sub
                    source: 'qrc:/img/num_keyboard_sub.png'
                    width:30
                    height: 30
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.verticalCenter: parent.verticalCenter
                }

                MouseArea{
                    anchors.fill: parent
                    onPressed: {
                        img_keyboard_sub.width -=2
                        img_keyboard_sub.height -=2
                    }
                    onReleased: {
                        img_keyboard_sub.width +=2
                        img_keyboard_sub.height +=2
                        if(valueText.text === '')
                        {
                            valueText.text = '0'
                        }
                        var val=  Number.parseFloat(valueText.text) - ((valueText.text.indexOf(".") !== -1) ? 0.1: 1.0)
                        val=val.toFixed(1);
                        valueText.text = val.toString()
                    }
                }
            }

            Text{
                id: valueText
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.verticalCenter: parent.verticalCenter
                anchors.horizontalCenterOffset: 28

                text: input_num
                font{
                    family: "Microsoft YaHei"
                    pixelSize: 20
                    bold: true
                }
                color: "#333333"
            }

            Rectangle{
                // +
                width:56
                height: 56
                anchors.verticalCenter: parent.verticalCenter
                anchors.right: parent.right
                anchors.rightMargin: 8
                radius: 5

                Image {
                    id: img_keyboard_add
                    source: 'qrc:/img/num_keyboard_add.png'
                    width:30
                    height: 30
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.verticalCenter: parent.verticalCenter
                }

                MouseArea{
                    anchors.fill: parent

                    onPressed: {
                        img_keyboard_add.width +=2
                        img_keyboard_add.height +=2
                    }

                    onReleased: {
                        img_keyboard_add.width -=2
                        img_keyboard_add.height -=2

                        if(valueText.text === '')
                        {
                            valueText.text = '0'
                        }

                        var val=  Number.parseFloat(valueText.text) +  ((valueText.text.indexOf(".") !== -1) ? 0.1: 1.0)
                        val=val.toFixed(1);
                        valueText.text = val.toString()
                    }
                }
            }

        }
        /********************************/
        Rectangle {
            id: rootKeyboard
            property color backgroundColor: "#202120"    //default
            property color pressedButtonColor: "#00a0fc" // default
            property color normalButtonColor: "#EFF1F5"//"#303751" // default

            width: 307
            height: 356
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 10




            // Function to handle button clicks
            function onButtonClick(buttonText) {
                console.log("Button clicked:", buttonText);
                // Handle the button click here

                if(buttonText === 'ok'){
                    root.acceptClicked()
                }
            }




            GridLayout {
                id:mainLayout
                y:66
                width: 307
                height: 356
                rows: 4
                columns: 4
                property var cellWidth: mainLayout.width / 4 - 4
                property var cellHeight: mainLayout.height / 4 - 4
                columnSpacing: 3
                rowSpacing: 3
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.verticalCenter: parent.verticalCenter
                Repeater{
                    id:repeater
                    model: [
                        "1", "2", "3", "Del",
                        "4", "5", "6", "OK",
                        "7", "8", "9",
                        "0", ".",
                    ]

                    delegate: Item {
                        width: (11 === index)? 2 * mainLayout.cellWidth: mainLayout.cellWidth
                        height: (7 === index)? 3 * mainLayout.cellHeight + 9: mainLayout.cellHeight
                        Layout.columnSpan: root.styleColumn(index)
                        Layout.rowSpan: root.styleRow(index)

                        Rectangle {
                            width: parent.width
                            height: parent.height
                            radius: 8
                            color: if (modelData === "Del")
                                       return mouseArea.pressed ? rootKeyboard.normalButtonColor : "red"
                                   else if(modelData === "OK")
                                       return mouseArea.pressed ? rootKeyboard.normalButtonColor : '#00D5CA'
                                   else
                                       return mouseArea.pressed ? rootKeyboard.pressedButtonColor : rootKeyboard.normalButtonColor

                            Text {
                                anchors.centerIn: parent
                                text: modelData
                                font{
                                    family: "Microsoft YaHei"
                                    pixelSize: 22
                                    bold: true
                                }
                                color: if (modelData === "Del")
                                           return mouseArea.pressed ? "#000" : "#FFF"
                                       else if(modelData === "OK")
                                           return mouseArea.pressed ? "#000" : "#FFF"
                                       else
                                           return mouseArea.pressed ? "#FFF" : "#000"
                            }

                            MouseArea {
                                id: mouseArea
                                anchors.fill: parent

                                onPressed: mouse.accepted = true;
                                onReleased: mouse.accepted = true;
                                // onClicked: mouse.accepted = true;

                                onClicked:{
                                    mouse.accepted = true;
                                    if (modelData === "OK"){
                                        if("" !== valueText.text){
                                            //root.numberText = valueText.text
                                            root.acceptClicked(valueText.text)
                                            // view.anchors.verticalCenterOffset = 0
                                            root.toDown()
                                            root.clear()
                                        }
                                        return;
                                    }

                                    if (modelData === "Del"){
                                        valueText.text = valueText.text.substring(0, valueText.text.length -1)

                                        return
                                    }

                                    if(valueText.text === '0')
                                    {
                                        valueText.text=''
                                    }

                                    var temValue = valueText.text+""
                                    temValue += modelData


                                    if(testReg(temValue)){
                                        valueText.text = temValue
                                    }else{
                                        valueText.text = temValue.substring(0, temValue.length -1)
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }


    }

}

